<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>烟花特效</title>
</head>
<body>
	


	<script>
		const config = {
			width:360,
			height:600,
			canvases: ['bg', 'firework'],
			skyColor: '210, 60%, 5%, 0.2',
			fireworkTime: {min:30, max:60},
			//烟花参数本身有默认值 传入undefined则使用默认参数
			fireworkOpt:{
				x: undefined,
				y: undefined,
				xEnd: undefined,
				yEnd: undefined,
				count: 300,     //炸裂后粒子数
				wait: undefined,  //消失后 => 炸裂  等待时间
			}
		}

		//构建微粒类
		class Particle{
			//默认值
			constructor({x, y, size = 1, radius = 1.2} = {}){
				this.x = x;
				this.y = y;
				this.size = size;
				this.rate = Math.random();   //每个微粒移动的速度都是随机不同
				this.angle = Math.PI * 2 * Math.random();   //每个微粒的偏移角度

				//每次微粒移动速度分解为横纵坐标的移动
				this.vx = radius * Math.cos(this.angle) * this.rate;
				this.vy = radius * Math.sin(this.angle) * this.rate;
			}

			go(){
				this.x += this.vx;
				this.y += this.vy;
				this.vy += 0.02;   //重力影响，y越大实际越偏下

				//空气阻力
				this.vx *= 0.98;
				this.vy *= 0.98;
			}

			//画出微粒的位置
			render(ctx){
				this.go();
				ctx.beginPath();
				ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
				ctx.fill();
			}	
		}






	</script>
</body>
</html>